<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <style>
        .panel {
            background: #98bf21;
            height: 100px;
            width: 300px;
            position: absolute;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#start").click(function () {
                const div = $("div");
                div.animate({left: "150px",}, 5000)
                div.animate({fontSize: "2em"}, 5000)
            })
            $("#stop").click(function () {
                $(".panel").stop()
            })
            $("#stopAll").click(function () {
                $(".panel").stop(true)
            })
            $("#stopFinish").click(function () {
                $(".panel").stop(true,true)
            })
        })
    </script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stopAll">停止所有</button>
<button id="stopFinish">停止但要完成</button>
<p>"开始" 按钮会启动动画。</p>
<p>"停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p>"停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p>"停止但要完成" 会立即完成当前活动的动画，然后停下来。</p>
<div class="panel">我开始动了</div>

</body>
</html>